<template>
	<view class='page-container'>
		<view class="song-base-info-container">
			<view class="song-base-info-label">
				歌曲名：
			</view>
			<view class="song-base-info-input">
				<input type="text" placeholder="请输入歌曲名" />
			</view>
		</view>
		<view class="song-base-info-container">
			<view class="song-base-info-label">
				备注：
			</view>
			<view class="song-base-info-input">
				<input type="text" placeholder="请输入备注" />
			</view>
		</view>
		<view class="song-lyric-info-container">
			<view class="song-lyric-info-item">
				<view class="song-lyric-sentence" v-for="(sentence,sentenceIndex) in songLyric.lyric">
					<view class="song-lyric-word-container">
						<block v-for="(word,wordIndex) in sentence">
							<block v-if="!word.isEmpty">
								<block v-if="!word.isSpecialChar">
									<view @click="selectLyricWord(sentenceIndex,wordIndex)">
										<view class="song-lyric-word-chord" v-if='word.isChord'>{{word.chordId}}</view>
										<view class="song-lyric-word-text"
											:class="primarySelection.sentenceIndex===sentenceIndex&&primarySelection.wordIndex===wordIndex?'song-lyric-word-primary-selection':'',word.isChord?`melody-${word.chordId}`:''">
											{{word.text}}</view>
									</view>
								</block>
								<text decode v-else>{{word.text}}</text>
							</block>

							<text decode v-else>{{word.text}}</text>
						</block>
					</view>
					<image src="/static/image/song/del.png" class="song-lyric-word-del"
						@click="delSongLyricSentence(sentenceIndex)"></image>
				</view>
			</view>
		</view>
		<view class="song-lyric-melody-tab-contaienr">
			<view class="song-lyric-input-container">
				<input class='song-lyric-input-item' v-model='lyricCache' type="text" placeholder="输入或粘贴歌词" />
				<view class="song-lyric-input-confirm" @click="confirmLyric">确定</view>
			</view>
			<view class="song-melody-container">
				<block v-for="chordMelodyName in Object.keys(chordMelody)">
					<view class="song-melody-item" :class="`melody-${chordMelodyName}`"
						@click="setChordMelody(chordMelodyName)">
						<text>{{chordMelody[chordMelodyName]}}</text>
						<text>{{chordMelodyName}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed } from 'vue';
	import { onNavigationBarButtonTap, onBackPress, onShow } from "@dcloudio/uni-app";

	const chordMelody = reactive({
		"C": 1,
		"Dm": 2,
		"Em": 3,
		"F": 4,
		"G": 5,
		"Am": 6,
		"Bm": 7,
	})

	const songLyric = reactive({
		lyric: []
	})

	const lyricCache = ref("");

	const confirmLyric = () => {
		if (lyricCache.value.trim().length === 0) {
			uni.showToast({
				icon: 'error',
				title: "歌词不能为空"
			})
			return
		}
		const reg = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·！#￥（——）：；“”‘、，|《。》？、【】[\]]/;
		const Array = splitMixedString(lyricCache.value).map(word => {
			return {
				text: word,
				isSelect: false,
				isEmpty: word === ' ',
				isChord: false,
				chordId: "",
				isSpecialChar: word.length === 1 && reg.test(word)
			}
		})
		songLyric.lyric.push(Array)
		console.log(songLyric.lyric);
		lyricCache.value = '';
	}

	const splitMixedString = (inputString : string) => {
		// 使用正则表达式匹配非英文字符或连续英文字符之间的空格作为分割点
		const nonEnglishOrSpaceBetweenEnglishRegex = /(\s+(?=\w['\w]*))|([^a-zA-Z'\s])/g;
		return inputString.split(nonEnglishOrSpaceBetweenEnglishRegex).filter(Boolean);
	}

	const primarySelection = reactive({
		sentenceIndex: -1,
		wordIndex: -1,
	})
	const songLyricWordTextClass = computed((event : any) => {

	})
	/**
	 * 预选歌词，将要为他添加和弦
	 */
	const selectLyricWord = (sentenceIndex : number, wordIndex : number) => {
		// 先判断这个词是不是已有和弦,存在则表示取消，不存在则预选
		if (songLyric.lyric[sentenceIndex][wordIndex].isChord) {
			songLyric.lyric[sentenceIndex][wordIndex].isChord = false
			primarySelection.wordIndex = -1
			primarySelection.sentenceIndex = -1
		} else if (primarySelection.wordIndex == wordIndex && primarySelection.sentenceIndex == sentenceIndex) {
			primarySelection.wordIndex = -1
			primarySelection.sentenceIndex = -1
		} else {
			console.log("预选", sentenceIndex, wordIndex)
			primarySelection.wordIndex = wordIndex
			primarySelection.sentenceIndex = sentenceIndex
		}
	}
	/**
	 * 预选歌词确定和弦
	 */
	const setChordMelody = (MelodyId : string) => {
		if (primarySelection.sentenceIndex > -1 && primarySelection.wordIndex > -1) {
			console.log(2222)
			songLyric.lyric[primarySelection.sentenceIndex][primarySelection.wordIndex].isChord = true
			songLyric.lyric[primarySelection.sentenceIndex][primarySelection.wordIndex].chordId = MelodyId

			primarySelection.wordIndex = -1
			primarySelection.sentenceIndex = -1
		}
	}


	/**
	 * 删除整个歌词的句子
	 */
	const delSongLyricSentence = (sentenceIndex : number) => {
		songLyric.lyric.splice(sentenceIndex, 1)
	}



	// 阻止用户返回
	const backPress = ref(true);
	/**
	 * 返回拦截，用户必须保存他的曲谱
	 */
	onBackPress(() => {
		if (backPress.value) {
			uni.showModal({
				title: "温馨提示",
				content: "曲谱尚未保存，是否继续",
				cancelText: "放弃保存",
				confirmText: "继续编辑",
				complete: (e) => {
					if (e.cancel) {
						backPress.value = false;
						uni.navigateBack()
					}
				}
			})
			return true
		} else {
			return backPress.value
		}
	})
	onNavigationBarButtonTap(() => {
		backPress.value = false;
		uni.navigateBack()
	})
</script>

<style lang="scss" scoped>
	.song-base-info-container {
		padding: 28rpx 32rpx 4rpx 32rpx;

		.song-base-info-label {
			font-size: 28rpx;
			color: #8A8A8A;
		}

		.song-base-info-input {
			width: 686rpx;
			height: 68rpx;
			background: #242424;
			border-radius: 16rpx;
			padding: 14rpx 32rpx;
			box-sizing: border-box;
			margin-top: 16rpx;
		}
	}

	.song-lyric-info-container {
		padding: 42rpx 32rpx 0 32rpx;
		// 100%高度减去 歌曲名 - 备注 - 底部输入框高度 - 安全高度（web预览高度存在一个安全顶部的状态栏高度44px无视他）
		height: calc(100vh - 308rpx - 338rpx - env(safe-area-inset-top));
		box-sizing: border-box;

		.song-lyric-info-item {
			width: 686rpx;
			height: 100%;
			padding: 32rpx 28rpx;
			background: #242424;
			border-radius: 16rpx;
			box-sizing: border-box;

			.song-lyric-sentence {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				width: 630rpx;

				.song-lyric-word-container {
					display: flex;
					flex-wrap: wrap;
					align-items: flex-end;
					max-width: 570rpx;

					.song-lyric-word-chord {
						text-align: center;
						padding-bottom: 10rpx;
					}

					.song-lyric-word-text {
						font-size: 34rpx;
						min-width: 36rpx;
						padding: 0 8rpx;
						margin-bottom: 10rpx;
						border-radius: 8rpx;
						text-align: center;
					}

					.song-lyric-word-primary-selection {
						font-size: 34rpx;
						padding: 0 8rpx;
						box-sizing: border-box;
						position: relative;
						text-align: center;
					}

					.song-lyric-word-primary-selection::after {
						content: " ";
						position: absolute;
						border-spacing: 5rpx;
						border: 1px dotted #25DA37;
						border-radius: 8rpx;
						box-sizing: border-box;
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
						animation: fadeInOut 1s infinite;
					}

				}

				.song-lyric-word-del {
					padding-left: 28rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.song-lyric-sentence:not(:last-child) {
				margin-bottom: 30rpx;
			}
		}
	}

	.song-lyric-melody-tab-contaienr {
		width: 100%;
		height: 338rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		padding-top: 42rpx;
		// 因为是fixed定位，需要预留好安全高度
		position: fixed;
		bottom: 0;
		background-color: #151515;

		.song-lyric-input-container {
			display: flex;
			align-items: center;

			.song-lyric-input-item {
				width: 548rpx;
				height: 64rpx;
				padding: 16rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				background: #242424;
				border-radius: 16rpx;
				margin-right: 32rpx;
				text-align: center;
			}

			.song-lyric-input-confirm {
				width: 106rpx;
				height: 64rpx;
				border-radius: 8rpx;
				border: 2rpx solid #25DADA;
				font-size: 28rpx;
				color: #25DADA;
				text-align: center;
				line-height: 64rpx;
			}
		}

		.song-melody-container {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: 32rpx;

			.song-melody-item {
				width: 80rpx;
				height: 112rpx;
				font-size: 32rpx;
				border-radius: 4rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
		}
	}

	.melody-C {
		background-color: #E92323;
		color: #FFFFFF;
	}

	.melody-Dm {
		background-color: #FF6F1C;
		color: #FFFFFF;
	}

	.melody-Em {
		background-color: #E8C805;
		color: #FFFFFF;
	}

	.melody-F {
		background-color: #25DA37;
		color: #FFFFFF;
	}

	.melody-G {
		background-color: #25DADA;
		color: #FFFFFF;
	}

	.melody-Am {
		background-color: #1925EF;
		color: #FFFFFF;
	}

	.melody-Bm {
		background-color: #FFFFFF;
		color: #000000;
	}

	@keyframes fadeInOut {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>